<template>
  <div>
    <template v-if="!isScanning">
      <!-- 幻灯片 -->
      <van-swipe class="home-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in swipeList" :key="item.image">
          <img v-lazy="item.image" style="max-width: 100%;" />
        </van-swipe-item>
      </van-swipe>
      <!-- 搜索 -->
      <div class="serach-wrapper">
        <van-search
          readonly
          use-right-icon-slot
          placeholder="搜索你想要的"
          @click="toSearch"
        >
          <van-icon
            size="24"
            name="scan"
            slot="right-icon"
            @click.stop="scanCode"
          />
        </van-search>
      </div>
      <div class="index-content">
        <!-- 品牌专区 -->
        <div class="icon-list">
          <div class="section-title">品牌专区</div>
          <van-grid column-num="4" :border="false">
            <van-grid-item
              use-slot
              v-for="item in brandsList"
              :key="item.id"
              @click="goBrands(item)"
            >
              <div class="square-container">
                <div class="square-content">
                  <img :src="item.logo" class="icon-image" />
                </div>
              </div>
              <div class="name">{{item.name}}</div>
            </van-grid-item>
          </van-grid>
        </div>
        <!-- 礼品专区 -->
        <div class="icon-list">
          <div class="section-title">礼品专区</div>
          <van-grid column-num="4" :border="false">
            <van-grid-item
              use-slot
              v-for="item in priceRanges"
              :key="item.id"
              @click="goSearchGoods(item)"
            >
              <div class="square-container">
                <div class="square-content">
                  <img :src="item.logo" class="icon-image" />
                </div>
              </div>
              <div class="name">{{item.name}}</div>
            </van-grid-item>
          </van-grid>
        </div>
        <!-- 热门推荐 -->
        <div class="hot-product">
          <div class="section-title">热门推荐</div>
          <van-grid
            column-num="2"
            :border="false"
          >
            <van-grid-item
              use-slot
              v-for="item in recommendGoodsList"
              :key="item.id"
              @click="gotoGoodsDetail(item)"
            >
              <div class="new-list">
                <van-grid column-num="1" square :border="false">
                  <van-grid-item use-slot>
                    <img :src="item.thumb" />
                  </van-grid-item>
                </van-grid>
                <div class="name-box">
                  <div class="name">{{item.title}}</div>
                </div>
                <div class="price">
                  <text>¥</text><text class="con">{{item.price}}</text>
                </div>
              </div>
            </van-grid-item>
          </van-grid>
        </div>
      </div>
    </template>
    <bar-scan
      v-else
      @scanOk="scanOk"
      @cancelScan="isScanning = false"
    />
  </div>
</template>

<script>
import home_new from "./home_new_controller";

export default home_new;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.home-swipe {
  height: 185px;
}

.index-content {
  padding: 10px;
  background-color: #ffffff;

  .section-title {
    margin: 0 0 10px;
    font-size: 16px;
    color: #000000;
    text-align: left;
  }

  .icon-list {

    .square-container {
      width: 100%;
      position: relative;
      padding-bottom: 100%;

      .square-content {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        overflow: hidden;

        .icon-image {
          max-width: 100%;
          max-height: 100%;
          /* border-radius: 50%; */
          overflow: hidden;
        }
      }

      .name {
        display: -webkit-box;
        margin-top: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
  }

  .hot-product {
    margin-top: 20px;

    .new-list {
      width: 100%;
      overflow: hidden;

      .name-box {
        height: 40px;

        .name {
          display: -webkit-box;
          margin: 10px 0;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }

      img {
        width: 100%;
      }
    }
  }
}
</style>